<template>
  <div>
    <el-dialog height="500px" :title="'物品信息'" :visible.sync="dialogFormVisible" width="1000px" @close="close">
      <vab-query-form>
        <vab-query-form-left-panel :span="12">
          <el-form :inline="true" :model="queryForm" @submit.native.prevent>
            <el-form-item>
              <el-input
                v-model.trim="queryForm.name"
                clearable
                placeholder="请输入产品名称"
                @clear="queryData"
                @keyup.enter.native="queryData"
              />
            </el-form-item>
            <el-form-item>
              <el-button icon="el-icon-search" type="primary" @click="queryData">查询</el-button>
            </el-form-item>
          </el-form>
        </vab-query-form-left-panel>
      </vab-query-form>
      <el-table v-loading="listLoading" :data="list" :element-loading-text="elementLoadingText">
        <el-table-column label="编码" min-width="150" prop="code" />
        <el-table-column label="物种" prop="classCode" show-overflow-tooltip />
        <el-table-column label="类别" prop="category" show-overflow-tooltip />
        <el-table-column label="产品名称" min-width="100" prop="name" show-overflow-tooltip />
        <el-table-column label="规格" prop="specification" show-overflow-tooltip />
        <el-table-column label="型号" prop="model" show-overflow-tooltip />
        <el-table-column label="采购" prop="purchase" show-overflow-tooltip />
        <el-table-column label="库管" prop="worker" show-overflow-tooltip />
        <el-table-column label="数量" prop="num" show-overflow-tooltip />
        <el-table-column label="剩余数量" show-overflow-tooltip>
          <template #default="{ row }">
            {{ row.num - row.outNum }}
          </template>
        </el-table-column>
        <el-table-column label="单位" prop="unit" show-overflow-tooltip />
        <el-table-column label="入库时间" min-width="160" prop="createAt">
          <template #default="{ row }">
            {{ parseTime(row.createAt) }}
          </template>
        </el-table-column>
        <el-table-column label="失效日期" min-width="100" prop="endTime">
          <template #default="{ row }">
            {{ parseTime(row.endTime, '{y}-{m}-{d}') }}
          </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" label="操作" show-overflow-tooltip>
          <template #default="{ row }">
            <el-button type="text" @click="handleOut(row)">出库</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page="queryForm.pageNo"
        :layout="layout"
        :page-size="queryForm.pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
      <div slot="footer" class="dialog-footer">
        <el-button @click="close">取 消</el-button>
      </div>
    </el-dialog>

    <el-dialog height="500px" :title="title" :visible.sync="dialogFormVisible1" width="500px" @close="close1">
      <el-form ref="form" label-width="100px" :model="form" :rules="rules">
        <el-form-item label="物种" prop="classCode">
          <el-input v-model.trim="form.classCode" autocomplete="off" :disabled="true" placeholder="请输入物种" />
        </el-form-item>
        <el-form-item label="产品名称" prop="name">
          <el-input v-model.trim="form.name" autocomplete="off" :disabled="true" placeholder="请输入产品名称" />
        </el-form-item>
        <el-form-item label="数量" prop="tempNum">
          <el-input v-model.number="form.tempNum" autocomplete="off" placeholder="请输入数量" type="number" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="close1">取 消</el-button>
        <el-button type="primary" @click="save">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { API_goodsList, API_goodsOut, API_goodsEdit } from '@/api/goods'
  import { parseTime } from '@/utils/index'

  export default {
    name: 'GoodsEdit',
    data() {
      return {
        parseTime,
        list: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        elementLoadingText: '正在加载...',
        queryForm: {
          pageNo: 1,
          pageSize: 10,
          direction: 1,
        },
        timeOutID: null,
        form: {
          classCode: '',
          name: '',
          tempNum: '',
        },
        rules: {
          classCode: [{ required: true, trigger: 'blur', message: '请输入物种' }],
          name: [{ required: true, trigger: 'blur', message: '请输入产品名称' }],
          tempNum: [{ required: true, trigger: 'blur', message: '请输入数量' }],
        },
        title: '',
        dialogFormVisible: false,
        dialogFormVisible1: false,
      }
    },
    methods: {
      handleOut(row) {
        this.form = Object.assign({}, row)
        this.dialogFormVisible1 = true
      },
      showEdit(row) {
        if (!row) {
          this.title = '出库'
        } else {
          this.title = '出库'
          this.form = Object.assign({}, row)
        }
        this.fetchData()
        this.dialogFormVisible = true
      },
      close() {
        this.dialogFormVisible = false
      },
      close1() {
        this.$refs['form'].resetFields()
        this.form = this.$options.data().form
        this.dialogFormVisible1 = false
      },
      save() {
        this.$refs['form'].validate(async (valid) => {
          if (valid) {
            if (this.form.tempNum > this.form.num - this.form.outNum) {
              return this.$baseMessage('数量不足,出库失败!', 'warning')
            }
            this.form.num = this.form.tempNum
            delete this.form.tempNum
            delete this.form.outNum
            const { message } = await API_goodsOut(this.form)
            this.$baseMessage(message, 'success')
            this.dialogFormVisible1 = false
            this.$emit('fetch-data')
            this.close()
          } else {
            return false
          }
        })
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.fetchData()
      },
      queryData() {
        this.queryForm.pageNo = 1
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        const { data } = await API_goodsList(this.queryForm)
        this.list = data.list
        this.total = data.count
        this.timeOutID = setTimeout(() => {
          this.listLoading = false
        }, 300)
      },
    },
  }
</script>
